<template>
  <div>
    <Header></Header>
    <div class="youer-container">
      <div class="xitongjieshao" style="position: relative;">
        <div style="width:160px;text-align:center;font-size:16px;color:#000;position:absolute;right:0;top:-50px;">
          <img src="/images/qrcode/xiaobenke.png" alt="" style="width:120px;height:120px;">
          <p>扫一扫生成产品</p>
          <p>相关图文介绍文档预览</p>
        </div>
        <div class="title title-long">
          <h2>中小学云智能音乐教学系统</h2>
          <p>MUSIC TEACHING SYSTEM IN PRIMARY AND SECONDARY SCHOOLS</p>
        </div>
        <div class="xitong-cont">
          <div class="xitong-img">
            <img src="/images/xiaobenke/xitongjieshao.png" alt="">
            <p>教学系统</p>
          </div>
          <div class="xitong-text">
            <p>采用“云服务器+本地课程主机”的移动互联网部署解决方案，课程全面满足中小学音乐教学需求，操作简单便捷，是传统数字化音乐教学系统向智能化方向发展的革命性演进。</p>
            <p>围绕音乐教学的多样性、生动性，从音乐理解、音乐创作以及音乐文化修养等多个维度对学生进行培养，使学生感知能力、想象能力、审美能力得到全面提升。</p>
          </div>
        </div>
      </div>
      <div class="shezhi">
        <div class="shezhi-title">
          <h3>课程设置</h3>
        </div>
        <div class="shezhi-cont">
          <div class="shezhi-item">
            <div class="shezhi-img">
              <img src="/images/youer/shezhi1.png" alt="">
            </div>
            <div class="shezhi-type">
              <h4>课程时长</h4>
            </div>
            <div class="shezhi-explain">
              <p>45-50分钟/课时</p>
            </div>
          </div>
          <div class="shezhi-item">
            <div class="shezhi-img">
              <img src="/images/youer/shezhi2.png" alt="">
            </div>
            <div class="shezhi-type">
              <h4>适合群体</h4>
            </div>
            <div class="shezhi-explain">
              <p>义务教育阶段1-9年级</p>
            </div>
          </div>
          <div class="shezhi-item">
            <div class="shezhi-img">
              <img src="/images/youer/shezhi3.png" alt="">
            </div>
            <div class="shezhi-type">
              <h4>课程形式</h4>
            </div>
            <div class="shezhi-explain">
              <p>集体课，针对学校课表内的音乐校本课</p>
            </div>
          </div>
        </div>
      </div>
      <div class="kechengtese">
        <div class="title">
          <h2>课程特色</h2>
          <p>COURSE CHARACTERISTICS</p>
        </div>
        <div class="tese-cont">
          <div class="tese-item">
            <div class="tese-num">
              <span>01</span>
            </div>
            <div class="tese-img">
              <img src="/images/xiaobenke/tese1.png" alt="">
            </div>
            <div class="tese-explain">
              <h4>教学内容及内容体系</h4>
              <p>涵盖人教、人音两大主流教材，依据教育部大纲要求，通过歌词、节奏、音高、学唱、范唱、伴奏、学练提示等形式，呈现唱歌、歌表演、表演唱、读童谣、欣赏、学乐器、活动等相关内容。</p>
            </div>
          </div>
          <div class="tese-item">
            <div class="tese-num">
              <span>02</span>
            </div>
            <div class="tese-img">
              <img src="/images/xiaobenke/tese2.png" alt="">
            </div>
            <div class="tese-explain">
              <h4>庞大的教学资源库</h4>
              <p>五线谱、简谱一键切换；通过点拉拖拽，30秒完成备课生成教案；自动记录授课轨迹，生成教学笔记；通过扫描相应的二维码可进行文档的查看预览；通过单一的功能按键和简单的手势操作，使得老师的教学过程简洁清晰，轻松便捷。</p>
            </div>
          </div>
          <div class="tese-item">
            <div class="tese-num">
              <span>03</span>
            </div>
            <div class="tese-img">
              <img src="/images/xiaobenke/tese3.png" alt="">
            </div>
            <div class="tese-explain">
              <h4>贴心的老师助手</h4>
              <p>涵盖人教、人音两大主流教材，依据教育部大纲要求，通过歌词、节奏、音高、学唱、范唱、伴奏、学练提示等形式，呈现唱歌、歌表演、表演唱、读童谣、欣赏、学乐器、活动等相关内容。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="anli">
        <div class="title">
          <h2>特色案例</h2>
          <p>COMPANY NEW CENTER</p>
        </div>
        <div class="anli-cont">
          <div class="anli-item">
            <img src="/images/xiaobenke/anli1.png" alt="">
          </div>
          <div class="anli-item">
            <img src="/images/xiaobenke/anli2.png" alt="">
          </div>
          <div class="anli-item">
            <img src="/images/xiaobenke/anli3.png" alt="">
          </div>
          <div class="anli-item">
            <img src="/images/xiaobenke/anli4.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../../components/Header'
import Footer from '../../components/Footer'
export default {
  head () {
    return {
      title: '中小学云智能音乐教学系统-河南酷音智能科技有限公司'
    }
  },
  data() {
    return {}
  },
  components: {
    Header, Footer
  }
}
</script>

<style lang="less" scoped>
.youer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  &::after {
    content: '';
    width: 182px;
    height: 12px;
    background: url(/images/youer/titlebg.png) no-repeat;
    position: absolute;
    top: 65px;
  }

  &.title-long {

    &::after {
      width: 464px;
      background: url(/images/youer/titlebg_long.png) no-repeat;
    }
  }

  h2 {
    font-size: 36px;
    color: #000;
  }

  p {
    margin-top: 30px;
    font-size: 18px;
    color: #959595;
  }
}
.xitongjieshao {
  margin-top: 115px;

  .xitong-cont {
    width: 1200px;
    // height: 264px;
    margin-top: 70px;
    padding: 75px 65px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 2px solid #31b1eb;
    overflow: hidden;

    .xitong-img {
      text-align: center;

      p {
        margin-top: 30px;
        font-size: 24px;
        color: #31b1eb;
      }
    }

    .xitong-text {
      // width: 860px;
      margin-left: 50px;

      p {
        margin-bottom: 10px;
        font-size: 18px;
        color: #000;
        line-height: 2;

        &:last-child {
          margin: 0;
        }
      }
    }
  }
}
.shezhi {
  margin-top: 120px;

  .shezhi-title {
    text-align: center;
    margin-bottom: 60px;

    h3 {
      font-weight: normal;
      font-size: 30px;
      color: #000;
      letter-spacing: 2px;
    }
  }

  .shezhi-cont {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .shezhi-item {
    width: 276px;
    height: 276px;
    margin: 0 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #31b1eb;

    .shezhi-img {
      display: flex;
      height: 140px;
      align-items: center;
    }

    h4 {
      font-size: 26px;
      color: #00a0e9;
    }

    .shezhi-explain {
      padding: 0 25px;
    }

    p {
      margin-top: 17px;
      font-size: 22px;
      color: #000;
    }
  }
}
.kechengtese {
  margin-top: 120px;

  .tese-cont {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .tese-item {
    display: flex;
    flex-direction: row;
    width: 1200px;
    margin-bottom: 65px;
    padding: 35px 40px 35px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;

    &:last-child {
      margin: 0;
    }
  }

  .tese-num {
    flex-shrink: 0;

    span {
      display: inline-block;
      width: 55px;
      height: 65px;
      border-radius: 6px;
      text-align: center;
      line-height: 60px;
      color: #fff;
      font-size: 24px;
      background: #5ac1ef;
    }
  }

  .tese-img {
    flex-shrink: 0;
    width: 270px;
    height: 175px;
    margin-left: 45px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .tese-explain {
    margin-left: 45px;

    h4 {
      font-weight: normal;
      font-size: 24px;
      color: #00a0e9;
    }

    p {
      margin-top: 20px;
      font-size: 18px;
      color: #000;
      line-height: 36px;
    }
  }
}
.anli {
  margin: 120px auto 110px;

  .anli-cont {
    margin-top: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .anli-item {
    margin: 0 28px;

    img {
      width: 258px;
      height: 258px;
    }
  }
}
</style>
